<template>
<view class="index-userDetail-page">
  <u-swiper :list="computedUserAlbumUrlThumb" :height="550" @click="albumPreview"></u-swiper>
<!--  头像信息-->
  <u-card full :border="false" :show-head="false" :show-foot="false">
    <view slot="body">
      <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
        <view class="u-m-r-10">
          <!--头像信息-->
          <u-avatar :src="userInfo.userAvatar"  mode="circle" :show-sex="!!userInfo.genderDictValue" :sex-icon="gender[userInfo.genderDictValue]" ></u-avatar>
        </view>
        <view class="u-flex-1">
          <view class="u-font-18 u-p-b-20">{{userInfo.nickname}}</view>
          <view class="u-font-14 u-tips-color">{{userInfo.maritalStatusDictName}}</view>
        </view>
        <view class="u-m-l-10 u-p-10">
          <u-icon name="map" color="#969799" size="28"></u-icon>
        </view>
        <view class="u-m-l-10 u-p-10">
          {{userInfo.nowAreaName}}
        </view>
      </view>

    </view>
  </u-card>
  <!--基本信息-->
  <u-card full :border="false" title="基本信息">
    <view slot="body">
      <view v-if="userInfo.birthDay" style="margin-bottom: 20px;">
        <text class='iconfont icon-shengri icon-word-space'></text><text> {{userInfo.birthDay}} </text>
      </view>
      <view  class="st-flex-align-between" style="margin-bottom: 20px;">
        <view  v-if="userInfo.constellationDictName"><text class='iconfont icon-xingzuo  icon-word-space'></text><text>{{userInfo.constellationDictName}}</text></view>
        <view  v-if="userInfo.height"><text class='iconfont icon-shengao  icon-word-space'></text><text>{{userInfo.height}}cm</text></view>
        <view  v-if="userInfo.weight"><text class='iconfont icon-tizhong  icon-word-space'></text><text>{{userInfo.weight}}kg</text></view>
      </view>
      <view style="margin-bottom: 20px;" v-if="userInfo.educationDictName">
        <text class='iconfont icon-daxuemingcheng icon-word-space'></text><text>{{userInfo.educationDictName}}</text>
        <text>
          {{userInfo.college || ''}} {{userInfo.major || ''}} {{userInfo.profession || ''}}
        </text>
      </view>

      <view style="margin-bottom: 20px;" v-if="userInfo.nowAreaName">
        <text class='iconfont icon-weizhi icon-word-space'></text><text>{{userInfo.nowAreaName}}</text>
      </view>
      <view class="info-content" v-if="userInfo.homeAreaNam">
        <text class='iconfont icon-fl-jia icon-word-space'></text><text>{{userInfo.homeAreaName}}</text>
      </view>
    </view>
  </u-card>
<!--生活信息-->
  <u-card full :border="false" title="生活信息">
    <view slot="body">

      <view class="st-flex st-flex-item-1" v-for="(item,index) in liveInfo" :key="index">
        <template v-if="index % 2 == 1">
          <view class="st-flex-item-1" style="margin-bottom: 20px;">
            <text class='iconfont icon-word-space' :class="liveInfo[index-1].icon"></text>
            <text>{{liveInfo[index-1].str}}{{liveInfo[index-1].str1||''}}</text>
          </view>
          <view class="st-flex-item-1" style="margin-bottom: 20px;">
            <text class='iconfont icon-word-space' :class="item.icon"></text>
            <text>{{item.str}}{{item.str1||''}}</text>
          </view>
          <view></view>
        </template>
      </view>

    </view>
  </u-card>
<!--  标签信息-->
  <u-card full :border="false" title="标签信息">
    <view slot="body">
      <view v-for="(value,name) in tagIcon" style="margin-bottom: 20px;" :key="name">
        <text class='iconfont icon-word-space' :class="value"></text>
        <text style="line-height: 2.0" v-if="tag && tag[name]">{{tag[name].contentNames}} {{tag[name].selfContent}}</text>
      </view>
    </view>
  </u-card>
<!--userInfo.userTags   typeDictCode-->
<!--  个人介绍-->
  <u-card full :border="false" title="个人介绍">
    <view slot="body">
      <text>{{userInfo.description}}</text>
    </view>
  </u-card>
  <!--  择偶标准-->
  <u-card full :border="false" title="择偶标准">
    <view slot="body">
      <text>{{userInfo.standard}}</text>
    </view>
  </u-card>
  <view style="height: 50px;"></view>
</view>
</template>

<script>
export default {
  name: "userDetail",
  computed: {
    // 用户相册地址
    computedUserAlbumUrl(){
      let r = []
      if(this.userInfo.picUrl){
        r.push(this.userInfo.picUrl)
      }
      if (this.userInfo.userAlbums) {
        this.userInfo.userAlbums.forEach(item => {
          r.push(item.picUrl)
        })
      }
      return r
    },
    computedUserAlbumUrlThumb(){
      let r = []
      this.computedUserAlbumUrl.forEach(url =>{
        r.push(this.imgUrl(url))
      })
      return r
    },
    // 生活信息
    liveInfo(){
      let r = []
      r.push({
        icon: 'icon-icon-test1',
        str: this.userInfo.isHasHourse ? '有' : '无',
        str1: this.userInfo.hourseCity
      })
      r.push({
        icon: 'icon-cheliang',
        str: this.userInfo.isHasCar ? '有' : '无',
        str1: this.userInfo.carCity
      })
      r.push({
        icon: 'icon-chouyan',
        str: this.userInfo.smokingDictName
      })
      r.push({
        icon: 'icon-hejiu',
        str: this.userInfo.drinkingDictName
      })
      r.push({
        icon: 'icon-qianmoney125',
        str: this.userInfo.monthSalary
      })

      r.push({
        icon: 'icon-qianmoney113',
        str: this.userInfo.yearSalary
      })
      return r
    },
    // 标签图标处理
    // type 为字典组编码
    tagIcon(){
      let r = {}
      r['nature_type_parent'] = 'icon-smileface'
      r['hobby_type_parent'] = 'icon-xingquaihao'
      r['food_type_parent'] = 'icon-shiwu'
      r['movie_type_parent'] = 'icon-dianying'
      r['trip_type_parent'] = 'icon-lvhang'
      r['sport_type_parent'] = 'icon-yundong101'
      return r
    },
    tag(){
      let r = {}
      if (!this.userInfo.userTags) {
        return null
      }
      this.userInfo.userTags.forEach(item =>{
        r[item.typeDictCode] = item
      })
      return r
    }
  },
  data(){
    return {
      userId: '',
      userInfo: {}
    }
  },
  onLoad(options) {
    this.userId = options.userId
  },
  onReady(){
    this.loadUserInfo()
    // 添加用户访问
    this.$http.post('/user-visit',{visitUserId: this.userId,visitTypeDictValue: 'list'})
  },
  methods: {

    // 加载用户数据
    loadUserInfo(){
      uni.showLoading({
        title: '加载中'
      })
      this.$http.get('/user-info/' + this.userId + '/detail').then( (response)=> {
        this.userInfo = response.data
      }).finally(() => {
        uni.hideLoading()
      })
    },
    // 相册 点击图片预览原图
    albumPreview(index){
      uni.previewImage({
        current: index,
        urls: this.computedUserAlbumUrl,
        indicator: 'number'
      })
    }
  }
}
</script>

<style scoped>
page{
  background-color: #ededed;
}
.iconfont:before{
  width: 20px;
}
.icon-word-space{
  margin-right: 20rpx;
}
</style>